import React, { Component } from 'react';
import styles from './index.css';
import { connect } from 'dva';
import { RouteComponentProps } from 'react-router-dom';
import { Dispatch, AnyAction } from 'redux';
import { Button, Modal, message } from 'antd';
import _ from 'lodash';
import { DeviceInfo } from '@/models/device';
import produce, { Draft } from 'immer';
import { getDeviceCollectionList, remoteOperationAdd, remoteOperation } from '@/services/device';

interface RemoteControlProps
  extends RouteComponentProps<{ deviceTypeNo: string; deviceId?: string }> {
  dispatch: Dispatch<AnyAction>;
}
interface remoteControlState {
  deviceInfo: DeviceInfo;
  visible: boolean;
  rows: any;
  visibleText: string;
  btnVisible: boolean;
}

class remoteControl extends Component<RemoteControlProps, remoteControlState> {
  state: remoteControlState = {
    visible: false,
    visibleText: '开机',
    btnVisible: false,
    rows: {
      deviceId: '',
      deviceName: '',
      deviceTypeName: '',
      typeName: '',
      remoteControlCode: '',
    },
  };
  //默认详情数据获取   
  handleQuery = async () => {
    console.log(111111);
    const { match } = this.props;
    const [err, data] = await getDeviceCollectionList({ deviceId: match.params.deviceId });
    if (!err) {
      this.setState(
        produce((draft: Draft<remoteControlState>): void => {
          draft.rows.deviceId = data.rows[0].deviceId;
          draft.rows.deviceName = data.rows[0].deviceName;
          draft.rows.deviceTypeName = data.rows[0].deviceTypeName;
          draft.rows.typeName = data.rows[0].typeName;
          draft.rows.remoteControlCode = data.rows[0].stateCode;
          draft.rows.stateCodeStr = data.rows[0].stateCodeStr;
        }),
      );
    }
  };
  // 确认操作  
  handleRemoteOperationAdd = async () => {
    this.setState({
      btnVisible: true,
    });
    const [err, data] = await remoteOperationAdd({
      deviceId: this.state.rows.deviceId,
      remoteControlCode: this.state.rows.remoteControlCode,
    });
    if (!err) {
      remoteOperation(data).then(res => {
        console.log(res);
        const [err, data] = res;
        if (!err) {
          message.info('操作成功');
          this.setState({
            btnVisible: false,
            visible: false,
          });
          this.handleQuery();
        }
      });
    }
  };
  // 点击开机  
  handleStatusOn = async () => {
    const { match } = this.props;
    const [err, data] = await getDeviceCollectionList({ deviceId: match.params.deviceId });
    if (!err) {
      if (data.rows[0].stateCode === 1009) {
        this.setState(
          produce((draft: Draft<remoteControlState>): void => {
            draft.rows.remoteControlCode = '1001';
            draft.visibleText = '开机';
            draft.visible = true;
          }),
        );
      } else {
        message.warning('当前设备状态下不能开机');
      }
    }
  };
  // 点击关机
  handleStatusOff = async () => {
    const { match } = this.props;
    const [err, data] = await getDeviceCollectionList({ deviceId: match.params.deviceId });
    if (!err) {
      if (data.rows[0].stateCode === 1008) {
        this.setState(
          produce((draft: Draft<remoteControlState>): void => {
            draft.rows.remoteControlCode = '1002';
            draft.visibleText = '关机';
            draft.visible = true;
          }),
        );
      } else {
        message.warning('当前设备状态下不能关机');
      }
    }
  }
  componentDidMount() {
    this.handleQuery();
  }
  // 返回  
  qwe = () => {
    const { dispatch, history } = this.props;
    dispatch({ type: 'device/clearChildren' });
    history.goBack();
  };
  // 关闭弹框   
  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  // 关闭弹框   
  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  render() {
    return (
      <div className={styles.container}>
        <div className={styles.containerTitle}>位置信息：设备管理 / 远程操控</div>
        <div className={styles['echartsTtile']}>
          <p>设备信息</p>
        </div>
        <div className={styles.ulcontainer}>
          <ul>
            <li>
              <div className={styles.liitem1}>资产类别 ：</div>
              <div className={styles.liitem2}>{this.state.rows.deviceTypeName}</div>
            </li>
            <li>
              <div className={styles.liitem1}>资产种类 ：</div>
              <div className={styles.liitem2}>{this.state.rows.typeName}</div>
            </li>
            <li>
              <div className={styles.liitem1}>设备状态明细 ：</div>
              <div className={styles.liitem2}>{this.state.rows.stateCodeStr}</div>
            </li>
            <li>
              <div className={styles.liitem1}>设备名称 ：</div>
              <div className={styles.liitem2}>{this.state.rows.deviceName}</div>
            </li>
            <li>
              <div className={styles.liitem1}>资产编号 ：</div>
              <div className={styles.liitem2}>{this.state.rows.deviceId}</div>
            </li>
          </ul>
        </div>
        <div className={styles['echartsTtile']}>
          <p>开机关机指令</p>
        </div>
        <div className={styles.control}>
          <div
            className={styles.controlBox}
            onClick={() => {
              this.handleStatusOn();
            }}
          >
            <img src={require('@/assets/images/devManager/on.png')} alt="" />
            <p>开机</p>
          </div>
          <div
            className={styles.controlBox}
            onClick={() => {
              this.handleStatusOff();
            }}
          >
            <img src={require('@/assets/images/devManager/off.png')} alt="" />
            <p>关机</p>
          </div>
        </div>
        <div className={styles.btn}>
          <Button className={styles.antBtn3} onClick={this.qwe}>
            返回
          </Button>
        </div>
        <Modal
          title="温馨提示"
          className="remoteControl_box"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>您确定发布{this.state.visibleText}指令吗？</p>
          <div className={styles.foot_btnBox}>
            <Button
              type="primary"
              className={styles.foot_btn}
              onClick={this.handleRemoteOperationAdd}
              htmlType="submit"
              loading={this.state.btnVisible}
            >
              确定
            </Button>
            <Button
              type="primary"
              onClick={() => {
                this.setState({
                  visible: false,
                });
              }}
              className={styles.foot_btn}
              htmlType="submit"
            >
              取消
            </Button>
          </div>
        </Modal>
      </div>
    );
  }
}

export default connect()(remoteControl);
